---
import dayjs from "dayjs";

// 这是 Astro 的元数据部分，用于配置组件和样式
export interface Props {
    // title: string;
    // description: string;
    // startDate: string;
    // endDate: string;
    // location: string;
    // address: string;
    post: any;
    colorIndex: number;
}

// const { post } = Astro.prop s;

const { post, colorIndex } =
    Astro.props;

let color = colorIndex % 2 === 1 ? "#e6ecff" : "#d9fdfb";
// style={`background-color: ${color};`}
---
<div class="container">
    <div class="card" style={`background-color: ${color};`}>
        <h2 class="title">{post.title}</h2>
        <p class="description">项目描述： {post.content}</p>
        <p class="description">学习收获： {post.harvest}</p>
        <a href={post.address} target="_blank" class="description">项目地址： {post.address}</a>
        <p class="description"> </p>
        <!-- <div class="info">
            <span class="date">{dayjs(post.startDate).startOf("day").format("YYYY-MM-DD")}
                 - 
                 {dayjs(post.endDate).startOf("day").format("YYYY-MM-DD")}</span>
        </div> -->
    </div>
</div>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        /* background-color: #d9fdfb; */
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 60%;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .card:hover {
        transform: scale(1.15);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .description {
        margin-bottom: 20px;
    }

    .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .date {
        color: #666;
    }

    p:hover {
        color: rgb(248, 69, 4);
    }

    a.description:hover {
        color: blue;
    }

</style>
